<!--
    优美诗句API
    内容展示：
        用到了列表组
-->
<template>
  <div class="container">

    <!--  面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">休闲娱乐</a></li>
        <li class="breadcrumb-item active" aria-current="page">优美诗句</li>
      </ol>
    </nav>

    <!--  头部卡片  -->
    <div class="card border-primary ">
      <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
      <div class="card-header bg-info">优美诗句</div>
      <div class="card-body ">
        <h5 class="card-title text-primary">随机来一首优美诗句</h5>
        <p class="card-text"></p>
        <button type="button" @click="getBeautifulPoem" class="btn btn-outline-success">随机优美诗句</button>

        <!--  旋转提示组件  -->
        <div class="spinner-border text-success ml-5" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>

    <div class="list-group mt-3">
      <div class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between poem-title">
          <div class="text-center w-100">
            <p class="mb-1 font-weight-bold">{{ source }}</p>
            <small>{{ beautifulPoem.author }}</small>
          </div>
        </div>
        <p class="mb-1 text-center">{{ beautifulPoem.content }}</p>
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'BeautifulPoem',
    data() {
      return {
        beautifulPoem: {},
        source: ""
      }
    },
    methods: {
      async getBeautifulPoem() {
        this.$(".spinner-border").css("display", "inline-block");

        const result = await this.$http.get("http://api.tianapi.com/txapi/verse/index?key=d1032a21949c41bbf6a472ec75a94e2a");
        this.beautifulPoem = result.data.newslist[0];
        this.source = "《" + this.beautifulPoem.source + "》";
        if (this.beautifulPoem !== null) {
          this.$(".spinner-border").css("display", "none");
        }


      }
    }
  }
</script>

<style scoped>
  .spinner-border {
    display: none;
  }

  .poem-title p {
    font-size: 20px;
  }
</style>
